<template>
    <p>
        <!-- <mu-circular-progress :size= "40"  v- if = "loading" /> -->
        <p v-html= "html" ></p>
    </p>
</template>
<style>
 
</style>
<script>
import axios from 'axios'; 
export  default {
    // 使用时请使用 :url.sync=""传值
    props: {
        url: {
            required:  true
        }
    },
    data () {
        return  {
            loading:  false ,
            html:  ''
        }
    },
    watch: {
        url(value) {
            console.log(value);
            this.load(value)
        }
    },
    mounted () {
        this.load( this.url)
    },
    methods: {
        load(url) {
            // var koa = require('koa');
            // var cors = require('koa2-cors');
            // var app = koa();
            // app.use(cors());
            if  (url && url.length > 0) {
                // 加载中
                this .loading =  true
                let param = {
                accept:  'text/html, text/plain'
                }

                axios.get(url, param).then((response) => {
                    this.loading =  false
                    // 处理HTML显示
                    this.html = response.data
                }). catch (() => {
                    this.loading =  false
                    this.html =  '加载失败'
                })
            }
        }
    }
}
</script>